<template>
  <div>
    <div class="head-box">
      <van-tabs>
        <van-tab v-for="(itm, index) in orderlist" :key="index">
          <template #title>
            <van-icon name="more-o" />{{ itm.title }}
          </template>
          <div class="bigbox">
          <div class="box" v-for="(item,i) in itm.data" :key="i">
            <div class="content">
              <div class="T-bzj-info">
                <span class="codenum">订单标题:{{item.title}}</span>
                <span class="copy">复制</span>
              </div>
              <div class="T-fbz-time">订单价格:{{item.price}}</div>
              <div class="T-fbz-author">
                <span class="order">代练时长：{{item.time}} </span>
              </div>
              <div class="T-fbz-author">
                <span class="order">联系电话：{{item.phone}} </span>
              </div>
            </div>
          </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <Footer />
  </div>
</template>

<script>
import Footer from "../components/footer.vue";
import { getorder } from "../api/postOrder";
import { gettakeorderlist } from "../api/postOrder";
import { mapState, mapGetters } from "vuex";
export default {
  components: {
    Footer,
  },
  data() {
    return {
      
    };
  },
computed: {
  ...mapState({
    orderlist:(state)=>state.postOrder.orderlist,
  })
},
  created() {
    if(localStorage.userInfo){
    let list=[{ title: "我的接单",data:[] }, { title: "我的发单",data:[] }];
    let user = JSON.parse(localStorage.userInfo).username;
    let username = { username: user };
    getorder(username).then((res) => {
      list[1].data = res.data.data;
    });
    gettakeorderlist(username).then((res) => {
      res.data.data.forEach(v=>{
        v.title=v.takeOrderTitle
        v.phone=v.ordername
      })
      list[0].data = res.data.data;
    });
    this.$store.commit('postOrder/getorderlist',list)
    // console.log(this.orderlist);
    }
  },
};
</script>

<style src="../assets/css/shoppingcar.css" scoped>
</style>
<style lang="less" scoped>
/deep/.van-tabs__wrap {
  padding: 0 65px;
  background: rgb(81, 144, 255);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
}
/deep/.van-tabs__nav {
  background: rgb(81, 144, 255);
  display: flex;
  align-items: center;
}
/deep/.van-tab {
  margin: 0 10px;
  padding-top: 5px;
  height: 80%;
  color: #fff;
}
/deep/.van-tab--active {
  background: #fff;
  color: #333;
  border-radius: 8px;
}
/deep/.van-tabs__line {
  bottom: 17px;
  background: #ccc;
}
.van-icon-more-o:before {
  content: "";
}
.van-tabs__content {
  padding-top: 20px;
}
</style>
